﻿<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">
    <title>Tina Flowers</title>

    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon"/>

    <!-- Google fonts include -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,900%7CYesteryear"
          rel="stylesheet">

    <!-- All Vendor & plugins CSS include -->
    <link href="assets/css/vendor.css" rel="stylesheet">
    <!-- Main Style CSS -->
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="layer/need/layer.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="/oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="/oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<!-- 开始页眉区 -->
<div class="header-area">


    <!-- header middle area start -->
    <div class="header-main-area sticky">
        <div class="container">
            <div class="row align-items-center position-relative">

                <!-- start logo area -->
                <div class="col-lg-3">
                    <div class="logo">
                        <a href="javascript:;">
                            <img src="assets/img/logo/logo.png" alt="">
                        </a>
                    </div>
                </div>
                <!-- start logo area -->

                <!-- main menu area start -->
                <div class="col-lg-6 position-static">
                    <div class="main-menu-area">
                        <div class="main-menu">
                            <!-- main menu navbar start -->
                            <nav class="desktop-menu">
                                <ul>
                                    <li><a href="javascript:;"> </a></li>
                                    <li><a href="shop.html">Home</a></li>
                                    <li><a href="javascript:;"> </a></li>
                                </ul>
                            </nav>
                            <!-- main menu navbar end -->
                        </div>
                    </div>
                </div>
                <!-- main menu area end -->

                <!-- mini cart area start -->
                <div class="col-lg-3">
                    <div class="header-configure-wrapper">
                        <div class="header-configure-area">
                            <ul class="nav justify-content-end">
                                <li>
                                    <a href="javascript:;" class="offcanvas-btn">
                                        <i class="lnr lnr-magnifier"></i>
                                    </a>
                                </li>
                                <li class="user-hover">
                                    <a href="javascript:;">
                                        <i class="lnr lnr-user"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="lnr lnr-heart"></i>
                                        <div class="notification">0</div>
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="minicart-btn" onclick="ordersBtn()">
                                        <i class="lnr lnr-list"></i>
                                        <div class="notification"><span id="ordersCountNum"></span></div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- mini cart area end -->

            </div>
        </div>
    </div>
    <!-- header middle area end -->
</div>
<!-- main header start -->
</div>
<!-- end Header Area -->
<!-- 主包装器开始 -->
<main>
    <!-- 滑块区域开始 -->
    <section class="slider-area">
        <div class="hero-slider-active slick-arrow-style slick-arrow-style_hero slick-dot-style">
            <!-- single slider item start -->
            <div class="hero-single-slide ">
                <div class="hero-slider-item bg-img" data-bg="assets/img/slider/home1-slide1.jpg">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="hero-slider-content slide-1">
                                    <span>valentine gift</span>
                                    <h1>Fresh Your Mind</h1>
                                    <h2>& Feeling love</h2>
                                    <a href="#produer" class="btn-hero banner-hero">shop now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- single slider item end -->

            <!-- single slider item start -->
            <div class="hero-single-slide">
                <div class="hero-slider-item bg-img" data-bg="assets/img/slider/home1-slide2.jpg">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="hero-slider-content slide-2">
                                    <span>valentine gift</span>
                                    <h1>Fresh Your Mind</h1>
                                    <h2>& Feeling love</h2>
                                    <a href="#produer" class="btn-hero banner-hero">shop now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- single slider item start -->
        </div>
    </section>
    <!-- slider area end -->

    <!-- 页面主包装器开始 -->
    <div name="produer" class="shop-main-wrapper section-space pb-0">
        <div class="container">
            <!-- shop main wrapper start -->
            <div>

                <div class="shop-product-wrapper">
                    <!-- shop product top wrap start -->
                    <div class="shop-top-bar">
                        <div class="row align-items-center">
                            <div class="col-lg-7 col-md-6 order-2 order-md-1">
                                <div class="top-bar-left">
                                    <div class="product-view-mode">
                                        <a class="active" href="javascript:;" data-target="grid-view"
                                           data-toggle="tooltip"
                                           title="Grid View"><i class="fa fa-th"></i></a>
                                        <a href="javascript:;" data-target="list-view" data-toggle="tooltip"
                                           title="List View"><i
                                                class="fa fa-list"></i></a>
                                    </div>
                                    <div class="product-amount">
                                        <p id="amount"> &nbsp; </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-5 col-md-6 order-1 order-md-2">
                                <div class="top-bar-right">
                                    <div class="product-short">
                                        <p>Sort By : </p>
                                        <select class="nice-select" id="sortby" name="sortby" onchange="clickSort()">
                                            <option value="newDate" selected>最新</option>
                                            <option value="priceAsc">价格升序</option>
                                            <option value="priceDesc">价格降序</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- shop product top wrap start -->

                    <!-- 产品项目列表包装器开始 -->
                    <div class="shop-product-wrap grid-view row mbn-40" id="contentShopProductWrap">

                    </div>
                    <!-- product item list wrapper end -->

                    <!-- 分页 -->
                    <div class="paginatoin-area text-center">
                        <ul class="pagination-box" id="paginationBox">

                        </ul>
                    </div>
                    <!-- end pagination area -->
                </div>
            </div>
            <!-- shop main wrapper end -->
        </div>
    </div>
    <!-- page main wrapper end -->

    <!-- banner statistics start -->
    <section class="top-sellers section-space banner-statistics-right">
        <div class="container">
            <div class="row">
                <!-- start banner item start -->
                <div class="col-md-6">
                    <div class="banner-item banner-border">
                        <figure class="banner-thumb banner-hero">
                            <a href="javascript:;">
                                <img src="assets/img/banner/banner-1.jpg" alt="">
                            </a>
                            <figcaption class="banner-content banner-content-right">
                                <h2 class="text1">for you</h2>
                                <h2 class="text2">Tulip Flower</h2>
                                <a class="store-link" href="javascript:;">shop now</a>
                            </figcaption>
                        </figure>
                    </div>
                </div>
                <!-- start banner item end -->

                <!-- start banner item start -->
                <div class="col-md-6">
                    <div class="banner-item banner-border">
                        <figure class="banner-thumb banner-hero">
                            <a href="javascript:;">
                                <img src="assets/img/banner/banner-2.jpg" alt="">
                            </a>
                            <figcaption class="banner-content banner-content-right">
                                <h2 class="text1">for you</h2>
                                <h2 class="text2">Flower & Box</h2>
                                <a class="store-link" href="javascript:;">shop now</a>
                            </figcaption>
                        </figure>
                    </div>
                </div>
                <!-- start banner item end -->
            </div>
        </div>
    </section>
    <!-- banner statistics end -->
</main>
<!-- main wrapper end -->

<!-- 启动页脚区域包装器 -->
<footer class="footer-wrapper">
    <!-- footer widget area start -->
    <div class="footer-widget-area">
        <div class="container">
            <div class="footer-widget-inner section-space">
                <div class="row mbn-30">
                    <!-- footer widget item start -->
                    <div class="col-lg-5 col-md-6 col-sm-8">
                        <div class="footer-widget-item mb-30">
                            <div class="footer-widget-title">
                                <h5>支付方式</h5>
                            </div>
                            <ul class="footer-widget-body accout-widget">

                            </ul>
                            <div class="payment-method">
                                <a href="javascript:;" alt="支付宝"> <img
                                        src="https://gw.alipayobjects.com/mdn/member_frontWeb/afts/img/A*h7o9Q4g2KiUAAAAAAAAAAABkARQnAQ"/></a>
                            </div>
                        </div>
                    </div>
                    <!-- footer widget item end -->

                    <!-- footer widget item start -->
                    <div class="col-lg-2 col-md-6 col-sm-4">
                        <div class="footer-widget-item mb-30">
                            <div class="footer-widget-title">
                                <h5>categories</h5>
                            </div>

                            <ul class="footer-widget-body">
                                <li><a href="javascript:;">Ecommerce</a></li>
                                <li><a href="javascript:;">shopify</a></li>
                                <li><a href="javascript:;">Prestashop</a></li>
                                <li><a href="javascript:;">Opencart</a></li>
                                <li><a href="javascript:;">Magento</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- footer widget item end -->

                    <!-- footer widget item start -->
                    <div class="col-lg-2 col-md-6 col-sm-6">
                        <div class="footer-widget-item mb-30">
                            <div class="footer-widget-title">
                                <h5>information</h5>
                            </div>
                            <ul class="footer-widget-body">
                                <li><a href="javascript:;">Home</a></li>
                                <li><a href="javascript:;">About Us</a></li>
                                <li><a href="javascript:;">Contact Us</a></li>
                                <li><a href="javascript:;">Exchanges</a></li>
                                <li><a href="javascript:;">Shipping</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- footer widget item end -->

                    <!-- footer widget item start -->
                    <div class="col-lg-2 offset-lg-1 col-md-6 col-sm-6">
                        <div class="footer-widget-item mb-30">
                            <div class="footer-widget-title">
                                <h5>Quick Links</h5>
                            </div>
                            <ul class="footer-widget-body">
                                <li><a href="javascript:;">Store Location</a></li>
                                <li><a href="javascript:;">My Account</a></li>
                                <li><a href="javascript:;">Orders Tracking</a></li>
                                <li><a href="javascript:;">Size Guide</a></li>
                                <li><a href="javascript:;">Contact Us</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- footer widget item end -->
                </div>
            </div>
        </div>
    </div>
    <!-- footer widget area end -->
    <!-- footer bottom area start -->
    <div class="footer-bottom-area">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 order-2 order-md-1">
                    <div class="copyright-text">
                        <p>Copyright &copy; 2020.Company Tina All
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- footer bottom area end -->


</footer>
<!-- End Footer Area Wrapper -->

<!-- 快速查看模式启动 -->
<div class="modal" id="quick_view">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <!-- product details inner end -->
                <div class="product-details-inner">
                    <div class="row">
                        <div class="col-lg-5 col-md-5">
                            <div class="product-large-slider">
                                <div class="pro-large-img">
                                    <img src="assets/img/product/product-details-img1.jpg" alt="product-details"/>
                                </div>
                                <div class="pro-large-img">
                                    <img src="assets/img/product/product-details-img2.jpg" alt="product-details"/>
                                </div>
                                <div class="pro-large-img">
                                    <img src="assets/img/product/product-details-img3.jpg" alt="product-details"/>
                                </div>
                                <div class="pro-large-img">
                                    <img src="assets/img/product/product-details-img4.jpg" alt="product-details"/>
                                </div>
                            </div>
                            <div class="pro-nav slick-row-10 slick-arrow-style">
                                <div class="pro-nav-thumb">
                                    <img src="assets/img/product/product-details-img1.jpg" alt="product-details"/>
                                </div>
                                <div class="pro-nav-thumb">
                                    <img src="assets/img/product/product-details-img2.jpg" alt="product-details"/>
                                </div>
                                <div class="pro-nav-thumb">
                                    <img src="assets/img/product/product-details-img3.jpg" alt="product-details"/>
                                </div>
                                <div class="pro-nav-thumb">
                                    <img src="assets/img/product/product-details-img4.jpg" alt="product-details"/>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7 col-md-7">
                            <div class="product-details-des quick-details">
                                <h3 class="product-name">Orchid flower white stick</h3>
                                <div class="ratings d-flex">
                                    <span><i class="lnr lnr-star"></i></span>
                                    <span><i class="lnr lnr-star"></i></span>
                                    <span><i class="lnr lnr-star"></i></span>
                                    <span><i class="lnr lnr-star"></i></span>
                                    <span><i class="lnr lnr-star"></i></span>
                                    <div class="pro-review">
                                        <span>1 Reviews</span>
                                    </div>
                                </div>
                                <div class="price-box">
                                    <span class="price-regular">$70.00</span>
                                    <span class="price-old"><del>$90.00</del></span>
                                </div>
                                <h5 class="offer-text"><strong>Hurry up</strong>! offer ends in:</h5>
                                <div class="product-countdown" data-countdown="2019/08/25"></div>
                                <div class="availability">
                                    <i class="fa fa-check-circle"></i>
                                    <span>200 in stock</span>
                                </div>
                                <p class="pro-desc">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                                    nonumy
                                    eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
                                <div class="quantity-cart-box d-flex align-items-center">
                                    <h5>qty:</h5>
                                    <div class="quantity">
                                        <div class="pro-qty"><input type="text" value="1"></div>
                                    </div>
                                    <div class="action_link">
                                        <a class="btn btn-cart2" href="javascript:;">Add to cart</a>
                                    </div>
                                </div>
                                <div class="useful-links">
                                    <a href="javascript:;" data-toggle="tooltip" title="Compare"><i
                                            class="lnr lnr-sync"></i>compare</a>
                                    <a href="javascript:;" data-toggle="tooltip" title="Wishlist"><i
                                            class="lnr lnr-heart"></i>wishlist</a>
                                </div>
                                <div class="like-icon">
                                    <a class="facebook" href="javascript:;"><i class="fa fa-facebook"></i>like</a>
                                    <a class="twitter" href="javascript:;"><i class="fa fa-twitter"></i>tweet</a>
                                    <a class="pinterest" href="javascript:;"><i class="fa fa-pinterest"></i>save</a>
                                    <a class="google" href="javascript:;"><i class="fa fa-google-plus"></i>share</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> <!-- product details inner end -->
            </div>
        </div>
    </div>
</div>
<!-- Quick view modal end -->

<!-- offcanvas搜索表单开始 -->
<div class="offcanvas-search-wrapper">
    <div class="offcanvas-search-inner">
        <div class="offcanvas-close">
            <i class="lnr lnr-cross"></i>
        </div>
        <div class="container">
            <div class="offcanvas-search-box">
                <div class="d-flex bdr-bottom w-100">
                    <input type="text" id="searchData" maxlength="40" placeholder="搜索...">
                    <button onclick="searchBtn()" class="search-btn"><i class="lnr lnr-magnifier"></i>search</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- offcanvas search form end -->

<!-- offcanvas迷你订单开始 -->
<div class="offcanvas-minicart-wrapper">
    <div class="minicart-inner">
        <div class="offcanvas-overlay"></div>
        <div class="minicart-inner-content">
            <div class="minicart-close">
                <i class="lnr lnr-cross"></i>
            </div>
            <div class="minicart-content-box">
                <div class="minicart-pricing-box">
                    <ul>
                        <li class="total">
                            <span>待付款</span>
                            <span class="cart-price"><strong id="noPay"></strong> 条</span>
                        </li>
                        <li class="total">
                            <span>总 数</span>
                            <span class="cart-price"><strong id="ordersNum"></strong> 条</span>
                        </li>
                        <li class="total">
                            <span>total</span>
                            <span class="cart-price"> <strong id="totalPrice"></strong> ￥</span>
                        </li>
                    </ul>
                </div>
                <div class="minicart-button">
                    <a href="javascript:;"><i class="fa fa-shopping-cart"></i> view cart</a>
                </div>
                <br/>
                <div class="minicart-item-wrapper">
                    <ul id="orders" class="orders">

                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- offcanvas mini cart end -->

<!-- 滚动到顶部开始 -->
<div class="scroll-top not-visible">
    <i class="fa fa-angle-up"></i>
</div>
<!-- Scroll to Top End -->

<!--All Vendor Js -->
<script src="assets/js/vendor.js"></script>
<!-- Active Js -->
<script src="assets/js/active.js"></script>
<script src="layer/layer.js"></script>


<!--渲染数据-->
<script>
    const handlerTemplate = ({id, title, flowersDesc, cover, flowersImg, originPrice, sellPrice, discount, likeNum, limitNum, options, totalSales, monthSales, praiseRate, status, addTime, editTime, stock}) => {
        return `
        <div class="col-md-4 col-sm-6">
        <div class="product-item">
        <figure class="product-thumb">
        <a href="javascript:;">
        <img class="pri-img" src="${cover}">
        <img class="sec-img" src="${flowersImg}">
        </a>
        <div class="product-badge">
        <div class="product-label new">
        <span>new</span>
        </div>
        <div class="product-label discount">
        <span>${discount} %</span>
        </div>
        </div>
        <div class="button-group">
        <a href="javascript:;" data-toggle="tooltip" data-placement="left"
        title="Add to wishlist"><i class="lnr lnr-heart"></i></a>
        <a href="javascript:;" data-toggle="modal" data-target="javascript:;quick_view"><span
        data-toggle="tooltip" data-placement="left" title="Quick View"><i
        class="lnr lnr-magnifier"></i></span></a>
        <a href="javascript:;" data-toggle="tooltip" data-placement="left" title="购买" onclick="getDate('${id}', '${title}', '${flowersDesc}', '${cover}', '${originPrice}', '${sellPrice}', '${discount}')">
        <i class="lnr lnr-cart"></i></a>
        </div>
        </figure>
        <div class="product-caption">
        <p class="product-name" id="productName" style="    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;">
        <a href="javascript:;">${title}</a>
        </p>
        <div class="price-box">
        <span class="price-regular">￥ ${sellPrice}</span>
        <span class="price-old"><del>￥ ${originPrice}</del></span>
        <span> ${stock < 1 ? '<span style="color: #CC2121">库存不足</span>' : ' 库存: ' + stock}</span>
        </div>
        </div>
        </div>
        <div class="product-list-item">
        <figure class="product-thumb">
        <a href="javascript:;">
        <img class="pri-img" src="${cover}" >
        <img class="sec-img" src="${flowersImg}">
        </a>
        <div class="product-badge">
        <div class="product-label new">
        <span>new</span>
        </div>
        <div class="product-label discount">
        <span>${discount}%</span>
        </div>
        </div>
        </figure>

        <div class="product-content-list">
        <h5 class="product-name">
        <a href="javascript:;">${title}</a>
        </h5>
        <div class="price-box">
        <span class="price-regular">￥ ${sellPrice}</span>
        <span class="price-old"><del>￥ ${originPrice}</del></span>
        <span> ${stock < 1 ? '<span style="color: #CC2121">库存不足</span>' : '库存:' + stock}</span>
        </div>
        <p>

        </p>
        <div class="button-group-list">
        <a class="btn-big" href="javascript:;" data-toggle="tooltip" title="Add to Cart" onclick="getDate('${id}', '${title}', '${flowersDesc}', '${cover}', '${originPrice}', '${sellPrice}', '${discount}')">
        <i class="lnr lnr-cart"></i>购买
        </a>
        <a href="javascript:;" data-toggle="modal" data-target="javascript:;quick_view">
        <span data-toggle="tooltip" title="Quick View">
        <i class="lnr lnr-magnifier"></i>
        </span>
        </a>
        <a href="javascript:;" data-toggle="tooltip" title="Add to wishlist">
        <i class="lnr lnr-heart"></i>
        </a>
        </div>
        </div>
        </div>

        </div>`;
    }

    // 当前页数
    let currentPageIndex = 1;
    let pageSize = 100;

    // 渲染商品信息
    function dom(sortby) {
        contentShopProductWrap.innerHTML = null;
        var xhr = new XMLHttpRequest();
        if (sortby != null) {
            xhr.open('GET', '/flowers/list?sortBy=' + sortby + "&page=" + currentPageIndex + "&limit=" + pageSize, true);
        } else {
            xhr.open('GET', '/flowers/list?page=' + currentPageIndex + "&limit=" + pageSize, true);
        }
        xhr.send();
        xhr.onreadystatechange = function (e) {
            if (xhr.readyState == 4 && xhr.status == 200) {
                const data = JSON.parse(xhr.responseText)
                renderPageBar(data.count)
                document.getElementById("amount").innerText = "总共 " + data.data.length + " 条数据";
                fitterDataAndRender(data.data);
            }
        };
    }

    // 一打开就渲染数据
    window.οnlοad = dom(document.getElementById("sortby").value);

    // 筛选排序
    function clickSort() {
        dom(document.getElementById("sortby").value);
    }

    let goPay = function (productName, pay, price, time) {
        layer.open({
            title: [
                '请使用沙箱支付，' + time + '自动取消订单！',
                'background-color: #FF4351; color:#fff;'
            ]
            , content:
                '<h4>' + productName + '</h4>' +
                '<img src="' + pay + '" alt="codePay">' +
                '<h4 style="color: #FF4351;">' + price + ' ￥ ' +
                '</h4>'
        });
    }


    var productName = '';
    var price = '';
    var mail = '';
    // 发送请求支付
    var getDate = function (id, title, foodDesc, cover, originPrice, sellPrice, discount) {
        layer.open({
            content: '' +
                '<div class="form-group">\n' +
                '<h5>请输入邮箱：</h5>' +
                '<input class="form-field" type="email" placeholder="Email" id="mail">\n' +
                '    <span id="msg" style="color: #FF4351"></span>\n' +
                '</div>'
            , btn: ['提交', '取消']
            , yes: function (index) {
                mail = $("#mail").val();

                var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                if (mail == null || mail == '') {
                    $("#msg").html("邮箱不能为空")
                    return false;
                } else if (!reg.test(mail)) {
                    $("#msg").html("邮箱验证失败")
                    return false;
                } else {
                    var obj = {
                        flowersId: id,
                        title: title,
                        foodDesc: foodDesc,
                        cover: cover,
                        originPrice: originPrice,
                        sellPrice: sellPrice,
                        discount: discount,
                        number: 1,
                        status: 1,
                        mail: mail
                    };
                    productName = title;
                    price = sellPrice;
                    sendMsgToServer(obj);
                }
                layer.close(index);
            }
        });

    }


    // 搜索数据
    function searchBtn() {
        $("body").removeClass('fix');
        $(".offcanvas-search-inner, .minicart-inner").removeClass('show')
        contentShopProductWrap.innerHTML = null;
        if (document.getElementById("searchData").value != null && (document.getElementById("searchData").value) != "") {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/flowers/searchRed/' + document.getElementById("searchData").value, true);
            xhr.send();
            xhr.onreadystatechange = function (e) {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    const data = JSON.parse(xhr.responseText)
                    document.getElementById("amount").innerText = "总共 " + data.length + " 条数据";
                    for (const item in data) {
                        contentShopProductWrap.innerHTML += handlerTemplate(data[item])
                    }
                }
            }
        } else {
            console.log(currentPageIndex)
            dom(document.getElementById("sortby").value);
        }
    }

    // 过滤数据
    function fitterDataAndRender(data) {
        let endIndex = pageSize * currentPageIndex;
        let forStartIndex = 1;
        console.log(data);
        contentShopProductWrap.innerHTML = "";
        for (let i = (endIndex - pageSize); i < endIndex; i++) {

            contentShopProductWrap.innerHTML += handlerTemplate(data[i])
        }
        //currentPageIndex++;
    }

    // 渲染分页条
    function renderPageBar(dl) {
        let template = "<li><a class=\"previous\" href=\"javascript:;\"><i class=\"lnr lnr-chevron-left\"></i></a></li>";
        let pageCount = dl / pageSize;
        let pageCountSun = isDot(pageCount) ? parseInt(pageCount) + 1 : pageCount;
        for (let i = 0; i < pageCountSun; i++) {
            template += `<li ${i == 0 ? 'class="active"' : ''} onclick="alert(${i + 1})"><a href="javascript:;">${i + 1}</a></li>`;
        }
        template += "<li><a class=\"next\" href=\"javascript:;\"><i class=\"lnr lnr-chevron-right\"></i></a></li>";
        paginationBox.innerHTML = template;
    }

    function isDot(num) {
        var result = (num.toString()).indexOf(".");
        if (result != -1) {
            return true;
        } else {
            return false;
        }
    }

    <!-- websocket 连接 -->
    var socket;
    if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    } else {
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        socket = new WebSocket("ws://localhost:8989/webscoket/tina");
        //打开事件
        socket.onopen = function () {
            console.log("Socket 已打开");
        };

        //获得消息事件
        socket.onmessage = function (msg) {
            //发现消息进入    开始处理前端触发逻辑
            let parse = JSON.parse(msg.data);
            console.log(parse);
            layer.closeAll()
            if (parse.ordersNum != null) {
                ordersCountNum.innerHTML = parse.ordersNum
            }

            // 弹出支付页面
            if (parse.pay != null) {
                //自定义标题风格
                goPay(productName, parse.pay, price, '30分钟', null);
            }

            if (parse.status) {
                $("#payStatus").html("已付款")
            }

            if (parse.msg != null) {
                layer.open({
                    content: '<span style="color: #FF4351;">' + parse.msg + '</span>'
                    , btn: '我知道了'
                });
            }
        };
        //关闭事件
        socket.onclose = function () {
            //询问框
            layer.open({
                content: 'Socket已关闭!要不要刷新一下本页面么？' +
                    '</br><span class="search">需要连接websocket不然无法购物</span>'
                , btn: ['刷新', '不要']
                , yes: function (index) {
                    location.reload();
                    layer.close(index);
                }
            });
        };
        //发生了错误事件
        socket.onerror = function () {
            //询问框
            layer.open({
                content: '发生了小错误!要不要刷新一下本页面么？' +
                    '</br><span class="search">需要连接websocket不然无法购物</span>'
                , btn: ['刷新', '不要']
                , yes: function (index) {
                    location.reload();
                    layer.close(index);
                }
            });
        }
    }

    /**
     * 通过WebSocket对象发送消息给服务端
     */
    function sendMsgToServer(data) {
        layer.open({
            type: 2
            , content: '加载中'
            , shade: 0
            , style: 'color:#FF4351;'
            , time: 5
        });
        socket.send(JSON.stringify(data));
    }

    let dataFile = '';

    //点击订单列表
    function ordersBtn() {
        layer.open({
            type: 2
            , content: '加载中'
            , shade: 0
            , style: 'color:#FF4351;'
            , time: 5
        });
        $("body").addClass('fix');
        $(".minicart-inner").addClass('show')

        const orderTemplate = ({cover, title, number, sellPrice, totalAmount, status, addTime, codePayUrl}) => {
            console.log(codePayUrl)
            return `<li class="minicart-item">
         <div class="minicart-thumb">
         <a href="javascript:;">
         <img src="${cover}" alt="" />
         </a>
         </div>
         <div class="minicart-content">
         <h3 class="product-name">
         <a href="javascript:;">${title}</a>
         </h3>
         <p>
         <span class="cart-quantity">${number}<strong>&times;</strong></span>&nbsp;
         ￥<span class="cart-price">${sellPrice}</span>
         </p>
         <p>
          总价￥ <span class="cart-price">${totalAmount}</span>&nbsp;
          <span class="cart-price" id="payStatus">${status == 3 ? '已付款' : status == 2 ? `<a href='javascript:;' id='pendingPayment' onclick="goPay('${title}','${codePayUrl}','${sellPrice}','即将', null)">去支付</a>` : '已取消'}</span>
        </p>
        <p>${addTime}</p>
         </div>
         <button class="minicart-remove"><i class="lnr lnr-cross"></i></button>
         </li>`;
        }

        // 查询订单
        var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
        httpRequest.open('GET', '/orders/list', true); //第二步：打开连接/***发送json格式文件必须设置请求头 ；如下 - */
        httpRequest.setRequestHeader("Content-type", "application/json");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）var obj = { name: 'zhansgan', age: 18 };
        httpRequest.send();//发送请求 将json写入send中

        /**
         * 获取数据后的处理程序
         */
        totalPrice.innerHTML = null;
        orders.innerHTML = null
        httpRequest.onreadystatechange = function () {
            //请求后的回调接口，可将请求成功后要执行的程序写在其中
            layer.closeAll()
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
                var json = httpRequest.responseText;//获取到服务端返回的数据
                let parse = JSON.parse(json);
                ordersNum.innerHTML = parse.data.length
                totalPrice.innerHTML = parse.totalPrice;
                noPay.innerHTML = parse.noPay;
                for (const item in parse.data) {
                    orders.innerHTML += orderTemplate(parse.data[item])
                }

            }
        }
    }
</script>
</body>
</html>
